<template>
  <div class="exception">
    <img
      class="exception-icon"
      :src="`../assets/images/svg/icon-${code}-color.svg`"
      alt="exception"
    />
    <div class="exception-text">
      <h1>{{code}}</h1>
      <p>{{promptText}}</p>
      <div class="exception-action">
        <a :href="action.path">{{action.name}}</a>
      </div>
    </div>
  </div>
</template>

<script>
// 403,404,500
export default {
  props: {
    code: {
      type: Number | String,
      default: 500,
      required: true,
    },
    action: {
      type: Object,
      default: () => ({ path: "/", name: "返回首页" }),
    },
  },
  computed: {
    promptText() {
      const code = +this.code;
      let text = "";
      switch (code) {
        case 403:
          text = "抱歉，你无权访问该页面";
          break;
        case 404:
          text = "抱歉，你访问的页面不存在";
          break;
        case 500:
          text = "抱歉，服务器出错了";
          break;
      }
      return text;
    },
  },
};
</script>

<style lang="scss" scoped>
.exception {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  &-icon {
    max-width: 50%;
  }
  &-text {
    flex-grow: 1;
    h1 {
      margin-bottom: 24px;
      color: #515a6e;
      font-weight: 600;
      font-size: 72px;
      line-height: 72px;
    }
    p {
      margin-bottom: 16px;
      color: #808695;
      font-size: 20px;
      line-height: 28px;
    }
  }
}
</style>